<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>五角星-妖怪</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000000;
        }

    </style>
</head>
<body>
</body>
<script>
    function sina(a) {
        return Math.sin(a * Math.PI / 180)
    }

    function cosa(a) {
        return Math.cos(a * Math.PI / 180)
    }

    function tana(a) {
        return Math.tan(a * Math.PI / 180)
    }

    var bdsd = 3 - 4 * sina(18) * sina(18)
    var canvas1, canCon, x, y, body, maxw, maxh, r, statdeg, shep, jl;
    jl = 100
    r = 4
    statdeg = 0
    shep = 5;

    function dsq() {
        canvas1.height = maxh + ""
        statdeg += 10
        r += shep
        if (statdeg === 360) {
            statdeg = 0
        }
        if (r > 20) {
            shep = -2
        } else if (r < 2) {
            shep = 2
        }
        wjx()
    }

    window.onload = function () {
        canvasInit()
    }

    function canvasInit() {
        var canBox = document.createElement("canvas")
        body = document.body
        canBox.id = "cvs1"
        maxw = document.documentElement.clientWidth
        maxh = document.documentElement.clientHeight
        canBox.width = maxw + ""
        canBox.height = maxh + ""
        body.appendChild(canBox)
        canvas1 = document.querySelector("#cvs1")
        canCon = canvas1.getContext("2d")
        canCon.strokeStyle = "red";
        canCon.strokeRect(100, 100, maxw - 200, maxh - 200)
        body.onmousemove = function (e) {
            e = e || window.event
            if (e.pageX || e.pageY) {
                x = e.pageX
                y = e.pageY
            }
        }
        setInterval(dsq, 100)
    }

    function wjx() {
        if (x < 100 || y < 100 || x > maxw - 100 || y > maxh - 100) {
            return
        }
        let color = ["#FF0000", "#FFA500", "#FFFF00", "#00FF00", "#00FFFF", "#ffffFF", "#FF00FF"]
        let timeoutID = 0
        let x1 = x, y1 = y;
        for (let i = 0; i < color.length; i++) {
            hzs(x, y, color[i], r * i)
        }
    }

    function hzs(x, y, c, r) {
        let xr = r / bdsd
        canCon.strokeStyle = c
        canCon.lineWidth = 1
        canCon.beginPath()
        for (let j = 0; j < 10; j++) {
            if (j === 0) {
                canCon.moveTo(x - jl + cosa(statdeg + j * 36) * r, y - sina(statdeg + j * 36) * r)
            }
            if (j % 2 === 1) {
                canCon.lineTo(x - jl + cosa(statdeg + j * 36) * xr, y - sina(statdeg + j * 36) * xr)
            } else {
                canCon.lineTo(x - jl + cosa(statdeg + j * 36) * r, y - sina(statdeg + j * 36) * r)
            }
        }
        canCon.closePath()
        canCon.stroke()
        canCon.fillStyle = c;
        canCon.beginPath()
        for (let k = 0; k < 10; k++) {
            if (k === 0) {
                canCon.moveTo(x + jl + cosa(statdeg + k * 36) * xr, y - sina(statdeg + k * 36) * xr)
            }
            if (k % 2 === 1) {
                canCon.lineTo(x + jl + cosa(statdeg + k * 36) * r, y - sina(statdeg + k * 36) * r)
                if (k === 9) {
                    canCon.lineTo(x + jl + cosa(statdeg) * xr, y - sina(statdeg) * xr)
                    canCon.closePath()
                    canCon.fill()
                }
            } else if (k % 2 === 0 && k > 0) {
                canCon.lineTo(x + jl + cosa(statdeg + k * 36) * xr, y - sina(statdeg + k * 36) * xr)
                canCon.closePath()
                canCon.fill()
                canCon.beginPath()
                canCon.moveTo(x + jl + cosa(statdeg + k * 36) * xr, y - sina(statdeg + k * 36) * xr)
            }
        }
    }

</script>
</html>